<template>
	<view class="u-page">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form :model="userForm" ref="form1">
			<u-form-item label="姓名" prop="name" borderBottom><u--input v-model="userForm.name" border="none" placeholder="3-13数字或字母"></u--input></u-form-item>
			<u-form-item label="简介" prop="intro" borderBottom><u--input v-model="userForm.intro" border="none" placeholder="不低于3个字"></u--input></u-form-item>
		</u--form>
		<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
		<u-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userForm: {
				name: '',
				intro: ''
			},

			rules: {
				name: {
					type: 'string',
					required: true,
					pattern: /^[a-z0-9]{3,12}$/i,
					message: '3-12字符',
					trigger: ['blur', 'change']
				},

				intro: {
					type: 'string',
					required: true,
					pattern: /^[a-z0-9]{3,12}$/i,
					message: '3-12字符',
					trigger: ['blur', 'change']
				}
			}
		};
	},
	onReady() {
		// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
		this.$refs.form1.setRules(this.rules);
	},
	methods: {
		submit() {
			// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
			this.$refs.form1
				.validate()
				.then(res => {
					uni.$u.toast('校验通过');
				})
				.catch(errors => {
					uni.$u.toast('校验失败');
				});
		},
		reset() {
			this.$refs.form1.resetFields();
			setTimeout(() => {
				this.$refs.form1.clearValidate();
				// 或者使用 this.$refs.form1.clearValidate()
			}, 10);
		}
	}
};
</script>

<style lang="scss"></style>
